<template>
  <div class="kongzhiqi">
    <div class="top">{{ time }}</div>
    <div class="center">
      <img
        @click="zantingFn"
        v-if="status === 0"
        src="@/assets/images/暂停.png"
        alt=""
      />
      <img
        @click="jixuFn"
        style="width: 20px; height: 24px"
        v-else
        src="@/assets/images/继续.png"
        alt=""
      />
      <img
        @click="jieshuFn"
        class="jieshu"
        src="@/assets/images/结束.png"
        alt=""
      />
    </div>
    <div class="bottom">
      <img @click="jianFn" src="@/assets/images/减号.png" alt="" />
      <span class="sudu"
        >X <span>{{ num }}</span>
      </span>
      <img @click="jiaFn" src="@/assets/images/加号.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      status: 0,
      num: 1,
      time: "00:00:00",
      int: null, //定时器
      hours: 0,
      minutes: 0,
      seconds: 0,
      timeSpeed: 1000,
      initialMs: 1000, //初始时间毫秒
    };
  },
  methods: {
    jianFn() {
      if (this.num > 1) {
        this.num--;
      } else {
        this.num = 1;
      }
      if (this.num == 1) {
        this.timeSpeed = 1000;
      } else if (this.num == 2) {
        this.timeSpeed = 2000;
      } else if (this.num == 3) {
        this.timeSpeed = 3000;
      } else if (this.num == 4) {
        this.timeSpeed = 4000;
      }
    },
    jiaFn() {
      if (this.num >= 4) {
        this.num = 4;
      } else {
        this.num++;
      }
      if (this.num == 1) {
        this.timeSpeed = 1000;
      } else if (this.num == 2) {
        this.timeSpeed = 2000;
      } else if (this.num == 3) {
        this.timeSpeed = 3000;
      } else if (this.num == 4) {
        this.timeSpeed = 4000;
      }
    },
    zantingFn() {
      //暂停
      this.status = 1;
      // this.timeFn();
      // this.int=setInterval(this.timeFn(),1000);
      this.int = setInterval(() => {
        //获取小时、分钟和秒
        this.initialMs += 1000;
        this.hours = Math.floor(this.initialMs / 3600000);
        this.minutes = Math.floor((this.initialMs % 3600000) / 60000);
        this.seconds = Math.floor(((this.initialMs % 3600000) % 60000) / 1000);

        // 补零
        this.hours = this.hours < 10 ? "0" + this.hours : this.hours;
        this.minutes = this.minutes < 10 ? "0" + this.minutes : this.minutes;
        this.seconds = this.seconds < 10 ? "0" + this.seconds : this.seconds;
        // 返回格式化的时间字符串
        this.time = this.hours + ":" + this.minutes + ":" + this.seconds;
      }, this.timeSpeed);
    },
    jixuFn() {
      //继续
      this.status = 0;
      window.clearInterval(this.int);
    },
    jieshuFn() {
      //结束
      this.status = 0;
      window.clearInterval(this.int);
      this.hours = 0;
      this.minutes = 0;
      this.seconds = 0;
      this.initialMs = 1000;
      this.time = "00:00:00";
    },
  },
};
</script>
<style scoped lang="scss">
.kongzhiqi {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 30px 0;
  .top {
    font-size: 24px;
  }
  .center {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    .jieshu {
      margin-left: 30px;
    }
  }
  .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    .sudu {
      font-size: 24px;
      margin: 0 20px;
    }
  }
}
</style>